<template>
	<!-- 确认预约信息 -->
	<view class="content">
		<view class="card" >
			<view class="item">
				<text class="classfy">费用类型</text>
				<text>检测费</text>
			</view>
			<view class="item">
				<text class="classfy">就诊科室</text>
				<text>保健科</text>
			</view>
			<view class="item">
				<text class="classfy">就 诊 人</text>
				<text>{{user.name}}</text>
			</view>
			<view class="item">
				<text class="classfy">就诊卡号</text>
				<text>{{user.cardNum}}</text>
			</view>
		</view>
		<view class="card" v-for=" item in other">
			<view class="item"><text class="classfy">费用明细</text></view>
			<view class="item2">
				<view class="detail">
					<text >{{item.name}}</text>
					<text class="count">单价：¥{{item.price}} 数量：{{item.num}}</text>
				</view>
				<view class="price" ><text>¥{{item.price*item.num}}元</text></view>
			</view>
		</view>
		<view class="card" >
			<view class="item">
				<text class="classfy">支付方式</text>
				<text>余额</text>
			</view>
			<view class="item3" >
				<view class="classfy">
					<text>卡内余额</text>
					<text class="pri" >{{user.money}}元</text>
				</view>
				<navigator
					style="color:#006eff;"
					url="/pages/TopUpOnline/OutpatientTopUp/OutpatientTopUp"
					
				>
					去充值
					<text class="iconfont  icon-xiangyou1"></text>
				</navigator>
			</view>
		</view>
		<view class="know">
			<view class="title">预约须知：</view>
			<view class="nape">
				<view>1.核酸检测结果有效期：7天。</view>
				<view>
					2.受检者必须全程佩戴口罩，采样时将口罩封装在塑料袋里放入口袋中，采样后立即佩戴好口罩。
				</view>
				<view>
					3、新冠病毒核酸检测（咽拭子）采样前2小时不进食、不吸烟、不饮酒，采样前清水漱口。
				</view>
				<view>4、预约成功后如须退款，请于我院退费窗口办理。</view>
			</view>
		</view>
		<view class="confirmlnfoTotal" v-for=" item in other">
			<view>
				<text>
					合计：
					<text>{{item.num*item.price}}元</text>
				</text>
			</view>
			<view @click="go"><text>确认支付</text></view>
		</view>
	</view>
</template>
<script setup>
	import {reactive, ref,onMounted} from 'vue'
	import { useLoginStore } from '@/store/loginStore.js'
	import { onLoad } from '@dcloudio/uni-app';
	import {sureApi} from '@/api/nucleicAcidApi.js'
		const loginStore = useLoginStore()
		let id=ref()
		id.value=loginStore.id
let go = () => {
	uni.navigateTo({
		url: '/pages/nucleicAcidTesting/successfulReserve/successfulReserve'
	})
}
console.log(id.value)
let time=reactive({
	time:''
})
let data=reactive({
	// other:'',
	// user:''
})
let total=reactive({
	price:0
})
let other=reactive([])
let user=ref([])
sureApi(id.value,time.time).then((res)=>{
	if (res.data.code == 0) {
		console.log(res)
		data=res.data.data
		
		other.push(res.data.data.other)
		user.value=data.user[0]
		console.log(1,user,11)
	}
})
let dataId=reactive({
	id:0
})
onLoad(option => {
	dataId.id = option.id;
	console.log(dataId.id,'id');
});
let fn=()=>{
	user.forEach((v)=>{
		console.log(v.id,'用户')
	})
}
onMounted(()=>{
	fn()
})
</script>
<style scoped="" lang="less">
.content {
	margin: 50rpx 30rpx;
	.card {
		margin: 30rpx 0;
		font-size: 28rpx;
		border: 1px solid #f5f5f5;
		border-radius: 10rpx;
		.item {
			padding: 0 30rpx;
			border-top: 1px solid #f5f5f5;
			height: 100rpx;
			line-height: 100rpx;
			.classfy {
				color: #afb7c3;
				margin-right: 30rpx;
			}
			.go {
				float: right;
			}
		}
		.item2 {
			padding: 0 30rpx;
			border-top: 1px solid #f5f5f5;
			height: 150rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.detail {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				.count {
					font-size: 25rpx;
					color: #afb7c3;
					margin-top: 20rpx;
				}
			}
			.price {
			}
		}
		.item3 {
			padding: 0 30rpx;
			border-top: 1px solid #f5f5f5;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			justify-content: space-between;
			.classfy {
				color: #afb7c3;
				margin-right: 30rpx;
				.pri {
					color: black;
					margin-left: 30rpx;
				}
			}
		}
	}
	.know {
		height: 600rpx;
		margin-bottom: 200rpx;
		padding: 30rpx 30rpx;
		border: 1px solid #f5f5f5;
		border-radius: 10rpx;
		flex-direction: column;
		.title {
			font-size: 28rpx;
		}
		.nape {
			font-size: 28rpx;
			color: #959795;
			view {
				margin-top: 20rpx;
			}
		}
	}
	.confirmlnfoTotal {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;

		view {
			flex: 1;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 600;
			font-size: 30rpx;

			&:nth-child(1) {
				text {
					font-size: 25rpx;

					text {
						color: #f35a58;
						font-size: 30rpx;
					}
				}
			}

			&:nth-child(2) {
				background-color: #006eff;
				color: #fff;
			}
		}
	}
}
</style>
